<template>
	<view class="" style="background-color: white;">
		<!-- <view class="" style=" width: 100vw;" :style="{height: $uv.addUnit(pageHeight)}"> -->
		<mescroll-uni :height="pageHeight+ 'px'" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<view class="square-bg" style="">
				<view style="width: 100vw;" :style="{height: $uv.addUnit(statusBarHeight + 6)}">
				</view>

				<view class="flex-row-reverse flex-items-center" style="margin-right: 12px; height: 22px;">
					<image src="../../../static/search.png" style="width: 16px; height: 16px;"></image>
					<view class="flex-row flex-items-center" style="margin-right: 16px;" @click="checkCity">
						<text class="font-weight-medium font-14" style="color: #313C56;">{{ city }}</text>
						<image src="../../../static/dropDown.png" style="width: 16px; height: 16px;"></image>
					</view>
				</view>
				<view class="flex-row-center font-14 font-weight-regular"
					style="height: 34px; border-radius: 8px;background-color: white; width: calc(100% - 192px); margin-left: 96px; color: #EB7520; margin-top: 60px;"
					@click="clickAddress">
					{{ addr }}
				</view>
				<view class="flex-row flex-center" style="margin-top: 9px; margin-left: 12px; margin-right: 12px;">
					<view class="takeTask-bg" style="width: 168px; height: 168px; margin-right: 16px;"
						@click="pageTask">
						<view class="flex-row flex-items-center font-14 font-weight-medium"
							style="color: #313C56; margin-top: 85px; margin-left: 12px;">
							我要接任务
							<image src="../../../static/dropRight.png" style="width: 12px; height: 12px;"></image>
						</view>
						<text class="font-10 font-weight-regular"
							style="color: #95A4B3; margin-top: 7px; margin-left: 12px;">{{ totalUser }}+ 用户使用中</text>
						<view class="flex-row flex-items-center"
							style="margin-left: 12px; margin-right: 6px; margin-top: 7px; overflow: hidden;">
							<view v-for="(item, index) in headUrl" :key="index"
								style="width: 24px; height: 24px; border-radius: 4px; margin-right: 6px; min-width: 24px;">
								<image :src="item" style="width: 24px; height: 24px; border-radius: 4px;"></image>
							</view>
						</view>
					</view>

					<view class="flex-column">
						<view class="publishTask-bg" style="width: 168px; height: 80px;" @click="publishTask">
							<view class="flex-row flex-items-center font-14 font-weight-medium"
								style="color: #313C56; margin-top: 25px; margin-left: 12px;">
								发布任务
								<image src="../../../static/dropRight.png" style="width: 12px; height: 12px;"></image>
							</view>
							<text style="color: #95A4B3; margin-left: 12px;"
								class="font-12 font-weight-regular">发布任务需求</text>
						</view>
						<view class="asstes-bg" style="margin-top: 8px; width: 168px; height: 80px;"
							@click="pageToTeam">
							<view class="flex-row flex-items-center font-14 font-weight-medium"
								style="color: #313C56; margin-top: 25px; margin-left: 12px;">
								资源市场
								<image src="../../../static/dropRight.png" style="width: 12px; height: 12px;"></image>
							</view>
							<text style="color: #95A4B3; margin-left: 12px;"
								class="font-12 font-weight-regular">查看全部资源</text>
						</view>
					</view>
				</view>
				<view class="flex-column"
					style="border-top-right-radius: 16px; border-top-left-radius: 16px; background-color: white; margin-top: 16px;">
					<view style="margin-top: 16px; margin-left: 16px; margin-right: 16px;"
						:style="{height: bannerHeight}">
						<uv-swiper :list="banners" indicator indicatorMode="dot" circular radius="10px"
							:height="bannerHeight"></uv-swiper>
					</view>
					<view class="flex-row flex-items-center" style="margin-bottom: 9px;">
						<view v-for="(item,index) in tabs" :key="index" class="flex-column-center"
							style="height: 28px; margin-left: 16px; margin-top: 24px;" @click="getHomeProject(index)">
							<text class="square_tabs_item"
								:class="[tabIndex == index && 'square_tabs_item--active']">{{ item.name }}</text>
							<image v-show="tabIndex == index" src="../../../static/tabLine.png"
								style="width: 60px; height: 9px; margin-top: -6px;"></image>
						</view>
					</view>
					<placeholder v-if="dataList == 0" style="height: 180px;"></placeholder>
					<view v-else class="flex-column">
						<taskItem v-for="(item,index) in dataList" :key="item.id" :task="item" />
					</view>
				</view>

			</view>

		</mescroll-uni>
		<!-- </view> -->
		<popup ref="popup1" msg="发布任务需要BOSS身份NFT，请前往购买!" btnTitle="前往" type="warning" @confirm="popup1Confirm">
		</popup>
		<popup ref="popup2" msg="接受任务需要数字游民身份NFT，请前往购买!" btnTitle="前往" type="warning" @confirm="popup2Confirm">
		</popup>
		<popup ref="popup3" msg="断开后将退出该账号，确认断开连接? " btnTitle="断开" type="warning" @confirm="popup3Confirm">
		</popup>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
	import taskItem from "@/components/task-item/task-item.vue"
	import popup from "@/components/popup/popup.vue"
	import {
		checkSign,
		getUserCenter,
		getBanner,
		getHome,
		getHomeProject
	} from "../../../api";
	export default {

		name: "square",
		mixins: [MescrollMixin], // 使用mixin
		components: {
			taskItem
		},
		data() {

			return {
				headUrl: [],
				areaId: 0,
				city: '全部',
				digitalLevel: -1,
				bossLevel: -1,
				userLevel: 0,
				totalUser: 0,
				addr: 'Connect Wallet',
				dataList: [],
				banners: [],
				tabs: [{
					name: '悬赏任务'
				}, {
					name: '普通任务',
				}],
				tabIndex: 0,
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: '-- 没有更多了 --',
					empty: {
						use: false
					}
				},
			};
		},

		computed: {

			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.toolbarHeight - 5
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 50
			},
			bannerHeight() {
				const height = this.$uv.addUnit((this.screenWidth - 32) / (343 / 72))
				return height
			}
		},
		methods: {
			show() {
				const addressCookie = this.$cookie.getShortAddress();
				if (addressCookie) {
					this.addr = addressCookie
				}
				const area = this.$cookie.getArea()
				if (area) {
					this.areaId = area.id
					this.city = area.city
				} else {
					this.areaId = 0
					this.city = '全部'
				}
				this.getHome()
				this.getBanner()
				this.getHomeProject(0)
			},
			async clickAddress() {
				const addressCookie = this.$cookie.getAddress();
				console.error(addressCookie)
				if (addressCookie) {
					this.$refs.popup3.open()
					return;
				}
				this.addr = 'Connecting...'
				try {
					uni.showLoading()
					await this.$web3.connectWallet();
					const address = this.$web3.wallet.address()
					const addr = address.toString();
					const start = addr.substring(0, 6);
					const end = addr.substring(addr.length - 6, addr.length);
					const sign = start + "..." + end
					await this.$web3.checkSinger()
					const signMessage = await this.$web3.signer.signMessage(start + end); // 鉴权
					let params = {
						address: addr,
						sign: start + end,
						content: signMessage,
					}
					checkSign(params).then((data) => {
						uni.hideLoading()
						this.addr = sign
						this.$cookie.setToken(data)
						this.$cookie.setAddress(addr.toString())
					}).catch((e) => {
						console.error(e)
						uni.hideLoading()
						this.addr = 'Connect Wallet'
					})
					this.addr = sign
				} catch (error) {
					uni.hideLoading()
					this.addr = 'Connect Wallet'
					this.$refs.toast.show({
						msg: '请切换至 BSC 网络!'
					})
				}
			},

			disconnectWallet() {
				this.$cookie.removeAddressToken()
			},

			async getUserCenter() {
				await getUserCenter().then((data) => {
					if (data) {
						this.bossLevel = data.bossLevel
						this.digitalLevel = data.digitalLevel
					}
				}).catch((res) => {})
			},

			getHome() {
				getHome().then((data) => {
					this.totalUser = data.total
					this.headUrl = data.headUrl
				}).catch((res) => {})
			},

			getBanner() {
				getBanner().then((data) => {
					this.banners = data
				}).catch((res) => {})
			},
			
			getHomeProject(index) {
				this.tabIndex = index
				this.mescroll.resetUpScroll()
			},
			/**
			 * 加载列表数据
			 * @param {Object} page 刷新页面数据
			 */
			upCallback(page) {
			
				let type = this.tabIndex == 0 ? 1 : 2
				let params = {
					page: page.num,
					limit: page.size,
					type: type,
					area: this.areaId
				}
				getHomeProject(params).then((data) => {
					console.log(data)
					var curPageData = data.list;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.totalPage;
					//设置列表数据
					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage);
				}).catch((e) => {
					this.mescroll.endErr()
				})
			},

			async pageTask() {
				await this.getUserCenter()
				if (this.digitalLevel == 0) {
					this.$refs.popup2.open()
					return
				}
				uni.navigateTo({
					url: '/pages/task/task'
				})
			},

			async publishTask() {
				await this.getUserCenter()
				if (this.bossLevel == -1) {
					this.$refs.toast.show({
						msg: '请登录后继续操作!'
					})
					return
				}
				if (this.bossLevel == 0) {
					this.$refs.popup1.open()
					return
				}
				uni.navigateTo({
					url: '/pages/publish-task/publish-task'
				})
			},
			popup1Confirm() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},

			popup2Confirm() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},

			popup3Confirm() {
				this.disconnectWallet()
				this.$emit('disconnectWallet')
				this.addr = 'Connect Wallet'
			},

			pageToTeam() {
				uni.navigateTo({
					url: '/pages/resource-market/resource-market'
				})
			},

			tap() {
				// this.$refs.popup.open()
				uni.navigateTo({
					url: '/pages/task/task'
				})
			},

			checkCity() {
				uni.navigateTo({
					url: '/pages/check-city/check-city'
				})
			}
		}
	}
</script>

<style lang="scss">
	.square_tabs_item {
		height: 24px;
		color: #95A4B3;
		font-size: 14px;
		font-weight: 500;

		&--active {
			color: #313C56;
			font-size: 16px;
		}
	}

	.asstes-bg {
		background-image: url('../../../static/assetes-bg.png');
		background-repeat: no-repeat;
		background-size: 168px 100%;
	}

	.publishTask-bg {
		background-image: url('../../../static/publishTask-bg.png');
		background-repeat: no-repeat;
		background-size: 168px 100%;
	}

	.takeTask-bg {
		background-image: url('../../../static/takeTask-bg.png');
		background-repeat: no-repeat;
		background-size: 168px 100%;
	}

	.square-bg {
		background-color: white;
		background-image: url('../../../static/squareBg1.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
</style>